<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="../swiper/swiper.min.css">

    <!-- Demo styles -->
    <style>
        /*清除浮动代码*/
        .clearfloat:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
        }

        .clearfloat {
            zoom: 1
        }

        html, body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .entrance {
            width: 1920px;
            height: 1080px;
            padding: 0;
            margin: 0;
            position: relative;
            background: url("../images/5multiple.png") no-repeat;
        }

        .entrance .item-box {
            width: 1040px;
            height: 520px;
            position: absolute;
            top: 390px;
            left: 438px;
        }

        .item-box .box-title1, .item-box .box-title2 {
            height: 100px;
        }

        .item-box .app-item {
            list-style: none;
            cursor: pointer;
            width: 260px;
            height: 100px;
            float: left;
        }

        .item-box .box-title1 {
            margin-top: 124px;
        }

        .item-box .box-title2 {
            margin-top: 75px;
        }

        .box-title1 .app-item, .box-title2 .app-item {
            margin: 0 5px 0 84px;
        }

        .swiper-container {
            width: 100%;
            height: 100%;

        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }

        .swiper-pagination-bullet {
            width: 30px;
            height: 30px;
        }

        .swiper-container .start-stop-btn {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: 80px;
            height: 80px;
            cursor: pointer;
            z-index: 999;
        }

        .swiper-container .start-stop-btn a {
            display: inline-block;
            width: 80px;
            height: 80px;
            background: red;
        }

        .swiper-container .back-btn {
            position: absolute;
            left: 0;
            top: 0;
            width: 90px;
            height: 90px;
            cursor: pointer;
            z-index: 999;
        }
    </style>
</head>
<body>
<div class="app-box" id="app">
    <div class="entrance" v-show="!swiperShow">
        <div class="item-box">
            <div class="box-title1">
                <ul class="clearfloat">
                    <li class="app-item" @click="enterApp(0)" style="margin-left: 4px"></li>
                    <li class="app-item" @click="enterApp(1)"></li>
                    <li class="app-item" @click="enterApp(2)"></li>
                </ul>
            </div>
            <div class="box-title2">
                <ul class="clearfloat">
                    <li class="app-item" @click="enterApp(3)" style="margin-left: 175px"></li>
                    <li class="app-item" @click="enterApp(4)"></li>
                </ul>
            </div>
            <ul>

            </ul>
        </div>
    </div>

    <!-- Swiper -->
    <div class="swiper-container" v-if="swiperShow">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="image in images">
                <img :src="image">
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="start-stop-btn">
            <a class="start-btn" style="background: url('../images/start.png')" v-show="!autoPlay"
               @click="startAutoPlay"></a>
            <a class="pause-btn" style="background: url('../images/pause.png')" v-show="autoPlay"
               @click="stopAutoPlay"></a>
        </div>
        <div class="back-btn" style="background: url('../images/back.png')" @click="enterHome"></div>
    </div>
</div>

<!-- Swiper JS -->
<script src="../swiper/swiper.min.js"></script>
<script src="../js/vue.min.js"></script>

<!-- Initialize Swiper -->
<script>
    var app = new Vue({
        el: '#app',
        data: {
            //自动播放间隔
            autoplayTime: 7000,
            swiper: {},
            entrance: [],
            appData: [
                ['../images/10/1.JPG', '../images/10/2.JPG', '../images/10/3.JPG'],
                ['../images/12/1.JPG', '../images/12/2.JPG', '../images/12/3.JPG'],
                ['../images/14/1.JPG', '../images/14/2.JPG', '../images/14/3.JPG'],
                ['../images/11/1.JPG', '../images/11/2.JPG', '../images/11/3.JPG'],
                ['../images/13/1.JPG', '../images/13/2.JPG', '../images/13/3.JPG']
            ],
            images: [],
            autoPlay: true,
            swiperShow: false,
            index: 0,
            autoEnter: false,
            timer: {}
        },
        methods: {
            enterApp: function (index) {
                //进入应用内部
                var _this = this;
                _this.autoEnter = true;
                _this.index = index;
                _this.swiperShow = true;
                _this.images = _this.appData[index];
                _this.$nextTick(function () {
                    _this.swiper = new Swiper('.swiper-container', {
                        pagination: '.swiper-pagination',
                        nextButton: '.swiper-button-next',
                        prevButton: '.swiper-button-prev',
                        paginationClickable: true,
                        spaceBetween: 30,
                        centeredSlides: true,
                        autoplay: _this.autoplayTime,
                        autoplayDisableOnInteraction: false,
                        loop: false,
                        onReachEnd: function (swiper) {
                            setTimeout(function () {
                                //最后一个停留5秒退出
                                _this.index = _this.index + 1;
                                _this.outApp();
                            }, _this.autoplayTime)
                        }
                    });
                });
            },
            outApp: function () {
                //退出应用
                var _this = this;
                //移除所有slide监听事件,所以拖动和click事件失效了
                _this.swiper.destroy(false);
                //移除全部
                _this.swiper.removeAllSlides();
                _this.swiperShow = false;
                _this.images = [];
                _this.swiper = {};
                if (_this.autoEnter) {
                    //没有操作5秒进入播放下一个
                    setTimeout(function () {
                        if (_this.index > _this.appData.length - 1) {
                            _this.index = 0;
                        }
                        _this.enterApp(_this.index);
                    }, _this.autoplayTime);
                }
            },
            enterHome: function () {
                var _this = this;
                _this.autoEnter = false;
                _this.outApp();
            },
            startAutoPlay: function () {
                //开启自动播放
                var _this = this;
                _this.autoPlay = true;
                _this.swiper.startAutoplay();
            },
            stopAutoPlay: function () {
                //关闭自动播放
                var _this = this;
                _this.autoPlay = false;
                _this.swiper.stopAutoplay();
            }
        }
    })
</script>
</body>
</html>